@header-height: 44px;
@text-color: #fff;
@list-item-height: 40px;

.hidden-danger-card {
  position: absolute;
  right: 38px;
  top: 490px;
  width: 320px;
  height: 320px;

  .card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    color: @text-color;
    font-size: 12px;
    padding: 0;
    overflow: hidden; // 禁用外部滚动
    overflow: hidden;
  }

  // 告警列表样式
  .list-body {
    height: 100%; // 完全填充父容器高度
    overflow-y: auto; // 垂直方向可滚动
    overflow-x: hidden; // 禁用水平滚动
    position: relative;

    // 滚动条样式
    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 3px;
    }

    &::-webkit-scrollbar-thumb:hover {
      background-color: rgba(255, 255, 255, 0.5);
    }

    .list-item {
      display: flex;
      min-height: @list-item-height;
      padding: 4px 8px;
      transition: background-color 0.2s ease;
      justify-content: space-between;

      // 奇数行背景色
      &:nth-child(odd) {
        background-color: rgba(6, 47, 93, 1);
      }

      // 偶数行背景色
      &:nth-child(even) {
        background-color: rgba(30, 82, 132, 0.1);
      }

      &:hover {
        .list-col {
          color: rgb(255, 255, 255);
        }
      }

      &:last-child {
        border-bottom: none;
      }
    }

    .info-col {
      display: flex;
      flex-direction: column;
      flex: 1;
      white-space: normal; // 允许换行
      color: rgba(255, 255, 255, 1);
      font-size: 12px; // 设置字体大小为12px
      &.address-col {
        flex: 1;
        min-width: 0; // 允许内容适当收缩
      }
      &.category-col {
        width: 150px; // 减小宽度，避免超出容器
        color: #db874c;
        white-space: nowrap; // 保持类别名称不换行
        overflow: hidden; // 隐藏超出部分
        text-overflow: ellipsis; // 超出显示省略号
      }
    }

    .time-col {
      white-space: nowrap;
      margin-left: 4px;
      color: rgba(255, 255, 255, 0.8);
      width: 120px; // 设置固定宽度
      overflow: hidden; // 隐藏超出部分
      text-overflow: ellipsis; // 超出显示省略号
    }

    .empty-list {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      color: rgba(255, 255, 255, 0.6);
      font-size: 14px;
    }
  }
}
